<template>
  <el-dialog :title="title" width="1000px" :visible.sync="show" :append-to-body="true" @close="closeDialog">
    <el-form label-width="100px" :rules="rules" :model="addForm" ref="addForm">
      <el-form-item label="模板名称" prop="name">
          <el-input placeholder="请输入模板名称" style="width:800px" maxlength="20" v-model="addForm.name" size="large"></el-input>
      </el-form-item>
    </el-form>
    <el-form label-width="100px">
    <el-form-item label="信息类型设置" >
    <div class="templa_view"  v-for="(select,seleIndex) in addForm.data.length" :key="seleIndex">
    <i class="el-icon-close icon_del" @click="delFirstPari(seleIndex)"> </i>
    <el-form-item label="信息类型">
        <el-select @change="changeParimary($event,seleIndex)"  v-model="addForm.data[select-1].firstId" placeholder="选择一级属性">
      <el-option
        v-for="item in firstSelectOptions"
        :key="item.id"
        :label="item.name"
        :value="item.id"
      ></el-option>
    </el-select>
    </el-form-item>
    <div class="templ_items">
      <div class="templa_item" v-for="(item,index) in addForm.data[seleIndex].secondList.length" :key="index">
      <el-form-item style="overflow: hidden;z-index:9999" label="信息模板">
      <el-select v-model="addForm.data[seleIndex].secondList[index].id" @change="changeSecondSelect($event,seleIndex,index)" placeholder="选择二级属性">
        <el-option
          v-for="item in secondSelectOptions[seleIndex]"
          :key="item.pid"
          :label="item.name"
          :value="item.id"
        ></el-option>
      </el-select>
      </el-form-item>
      <div class="icon_btn" @click="delSecndPari(seleIndex,index)">
        <i class="el-icon-delete"></i>
      </div>
      </div>
      <div class="addBtn" @click="addSelectLength(seleIndex)">
        <i class="font_30 el-icon-plus"></i>
      </div>
      </div>
    </div>
    <el-button @click="addParimary" plain icon="el-icon-plus" style="">添加信息</el-button>
    </el-form-item>

    </el-form>

    <div class="comit">
    <div class="btnqi" @click="show=false" style="cursor: pointer">取消</div>
      <div class="btnSub" @click="subMit(1)" style="cursor: pointer">保存并启用</div>
    </div>
    <div class="comit">
    <div @click="$router.push('/malls/parimary');show=false" style="cursor:pointer" class="setBtn">设置属性参数</div>
    </div>
  </el-dialog>
</template>

<script>
export default {
  props: {
    showTemplate: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    showTemplate (val) {
      this.show = true
    }
  },
  data () {
    return {
      title: '添加模板',
      templateId: '',
      templageLength: 1,
      firseSelectArr: '',
      secondSelectArr: '',
      firstSelectOptions: [],
      secondSelectOptions: [],
      setFormRules: {

      },
      rules: {
        name: [{required: true, message: '请输入模板名称', trigger: 'blur'}]
      },
      selectIndex: 0,
      addForm: {
        name: '',
        data: [
          {
            firstId: '',
            secondList: [{
              id: ''
            }]
          }
        ],
        status: 0
      },
      show: false,
      cover: [],
      centerDialogVisible: false,
      viewImg: ''
    }
  },

  methods: {
    closeDialog () {
      // this.
    },
    editParimarData (id) {
      this.templateId = id
      this.title = '编辑模板'
      // this.getFirstSelectOptions()
      this.getEditData(id)
    },
    addParimarData () {
      this.title = '添加模板'
      this.templateId = ''
      this.addForm.name = ''
      this.addForm.data = [{
        firstId: '',
        secondList: [{
          id: ''
        }]
      }]
      this.getFirstSelectOptions()
    },
    delFirstPari (index) {
      this.addForm.data.splice(index, 1)
      this.secondSelectOptions.splice(index, 1)
    },
    delSecndPari (firstIndex, index) {
      if (index === 0) {
        return this.$message.warning('默认不能删除！')
      }
      this.$api.isGoodsParameterTemplateDel({
        template_id: this.templateId,
        parameter_id: this.addForm.data[firstIndex].secondList[index].id
      }).then(res => {
        if (res.code === 200) {
          this.addForm.data[firstIndex].secondList.splice(index, 1)
        }
      })
    },
    getEditData (id) {
      this.$api.getParameterTemplateList({pid: 0}).then(res => {
        if (res.code === 200) {
          this.firstSelectOptions = res.data
        }
      })
      this.$api.getGoodsParameterTemplateEdit({id: id}).then(res => {
        this.secondSelectOptions = []
        this.addForm.id = id
        this.addForm.status = res.data.status
        this.addForm.name = res.data.name
        this.addForm.data = res.data.info
        let tabs = res.data.info
        for (let i = 0; i < tabs.length; i++) {
          this.secondSelectOptions.push({})
          if (tabs[i].secondList.length === 0) {
            return true
          }
          this.$api.getParameterTemplateList({
            pid: tabs[i].firstId
          }).then(res => {
            this.secondSelectOptions.splice(i, 1, res.data)
          })
        }
      })
    },
    // 提交信息
    subMit (status) {
      this.addForm.status = status
      if (!this.addForm.name) {
        return this.$message.warning('请输入模板名称！')
      }

      let filterData = this.addForm.data.filter(item => {
        return item.firstId
      })
      // filterData.map(item => {
      //   item.secondList = item.secondList.filter(v => {
      //     return v.id
      //   })
      // })
      for (let i = 0; i < filterData.length; i++) {
        if (!filterData[i].secondList[0].id) {
          return this.$message.warning('请选择二级属性！')
        }
      }
      this.show = false
      this.addForm.data = filterData
      if (this.templateId) {
        this.$api.updateGoodsParameterTemplateEdit(this.addForm).then(res => {
          if (res.code === 200) {
            this.$emit('changeTemplate')
            this.$message.success('修改成功')
          }
        })
      } else {
        this.$api.goodsParameterTemplateAdd(this.addForm).then(res => {
          if (res.code === 200) {
            this.$emit('changeTemplate')
          }
        })
      }
    },
    changeSecondSelect (id, dataIndex, index) {
      let selects = this.addForm.data[dataIndex].secondList
      let tabs = []
      selects.map((item, itemIndex) => {
        if (itemIndex !== index) {
          tabs.push(item.id)
        }
      })
      if (tabs.length === 0) {
        return true
      }
      let isIndex = tabs.indexOf(id)
      if (isIndex !== -1) {
        this.addForm.data[dataIndex].secondList[index].id = ''
        this.$message.warning('请不要重复选择！')
      }
    },
    addParimary () {
      let datas = this.addForm.data
      if (this.addForm.data.length === 20) {
        return this.$message.warning('最多添加20个模板!')
      }
      for (let i = 0; i < datas.length; i++) {
        if (!datas[i].firstId && !datas[i].secondList[0].id) {
          return this.$message.warning('请选择属性！')
        }
      }
      this.addForm.data.push({
        firstId: '',
        secondList: [{
          id: ''
        }]
      })
    },
    changeParimary (id, index) {
      let tabs = []
      this.addForm.data.map((item, itemIndex) => {
        if (itemIndex !== index) {
          console.log(item)
          tabs.push(item.firstId)
        }
      })
      let isIndex = tabs.indexOf(id)
      if (isIndex !== -1) {
        this.addForm.data[index].firstId = ''
        this.$message.warning('请不要重复选择！')
      }
      this.getFirstSelectOptions(id)
      this.selectIndex = index
      this.addForm.data[index].secondList = [{id: ''}]
    },
    addSelectLength (dataIndex) {
      let select = this.addForm.data[dataIndex].secondList
      if (select[select.length - 1].id) {
        select.push({id: ''})
      } else {
        return this.$message.warning('请选择属性！')
      }
    },
    getFirstSelectOptions (selectId) {
      if (selectId) {
        this.$api
          .getParameterTemplateList({
            pid: selectId
          })
          .then(res => {
            this.secondSelectOptions.splice(this.selectIndex, 1, res.data)
            console.log(res, this.secondSelectOptions)
          })
      } else {
        this.$api.getParameterTemplateList({pid: 0}).then(res => {
          if (res.code === 200) {
            this.firstSelectOptions = res.data
          }
        })
      }
    }
  }
}
</script>

<style  scoped>
.icon_del{
  position: absolute;
  top:10px;
  right:10px;
  color: #999999;
  font-size: 20px;
}
.icon_btn{
  width: 40px;
  height: 40px;
  position: relative;
  left:-3px;
  display: flex;
  font-weight: bold;
  color:#999999;
  align-items: center;
  justify-content: center;
  border:1px solid #EEF1F5;
}
.templ_items{
  display: flex;
  flex-wrap: wrap;
}
.templa_view {
  border-radius: 2px;
  position: relative;
  margin-bottom: 20px;
  width: 800px;
  padding: 20px 0;
  border: 1px solid #dcdfe6;
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
  align-items:flex-start;
}
.addBtn {
  width: 40px;
  height: 40px;
  margin-left: 10px;
  margin-top: 20px;
  text-align: center;
  background-color: #429DFF;
  line-height: 40px;
  border: 1px solid #dcdfe6;
}
.font_30 {
  font-size: 20px;
  color: #dcdfe6;
  font-weight: bold;
}
.comit {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.btnSub {
  border-radius: 2px;
  width: 120px;
  height: 40px;
  text-align: center;
  line-height: 40px;
  background-color:#429DFF;
  margin-left: 10px;
  color: #ffffff;
}
.btnqi{
  border-radius: 2px;
  margin-right: 10px;
  width: 120px;
  height: 40px;
  text-align: center;
  line-height: 40px;
  border:1px solid #429DFF;
  color: #429DFF;
}
.setBtn {

  margin-top: 20px;
  font-size: 14upx;
  color: #429DFF;
  margin-left: 30px;
}
.templa_item{
  display: flex;
  margin-top: 20px;
}
</style>
